<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script src="${pageContext.request.contextPath}/js/Echarts/china.js"></script>
<style>
.choiceTab{
	height:57px;
}
.btnarea{
    margin-left: -13%;
    padding-top: 12px;
    width:100%;
}

/*
@media (max-width: 990px){
	.choiceTab {
    	height:110px;
	}
	.btnarea{
	float:right;
	padding-right:10%;
	}
}
*/
     .left {
        float: left;
        width: 30%;
      }
      .right {
     	margin-left: 33%;
        height: 500px;
      }
 .rightdiv{
    	position: absolute;
    	padding-left: 12%;
 }

.top {top:20;}
.nav { top:180px;}
.foot { top:250px;}
</style>
<div ng-controller="configurationCollectionController as controller">
	<div class="wrap">
		<div class="mapTips">
			<h6>
				<i class="glyphicon glyphicon-cog"></i>
				<span>条件设置</span>
			</h6>
		</div>
		<div class="conditionWrap" style="margin-top: 10px">
			<div class="toggleWrap">
			<div class="choiceTab" style="">
				<div class="timeChoiceInp ranking_timeChoiceInp">
					<form role="form" name="tableForm" class="form-horizontal">
					<div id="tab1" class="form-group">
						<div class="row">
							<div class="col-md-5 col-sm-5 col-xs-5" style="padding-left: 8px;">
								<label class="radio-inline" style="padding-top: 12px;width: 100%; margin-left: -6px;padding-left:0;">
								<span style="float:left;font-weight: bold;font-size: 11px;">监控指标：</span>
							     	<select class="form-control" style="width:60%;float:left;margin-left: 3%;" ng-model="selectedMonitorIndex">
										<option value="">全部</option>
										<option ng-repeat="x in monitorIndex" value="{{x.codes}}">{{x.namess}}</option>
						   			 </select>
						 		 </label>
							</div>
							<div class="col-md-5 col-sm-5 col-xs-5">
								<label class="radio-inline" style="padding-top: 12px;width: 100%; margin-left: 0;padding-left:0;">
								  <span style="float:left;font-weight: bold; font-size: 11px;">指标KPI：</span>
									<select class="form-control" style="width:60%;float:left; margin-left: 3%;"ng-model="selectedKpiIndex">
										<option ng-repeat="x in Index">{{x}}</option>
									</select>
								</label>
							</div>
							<div class="col-md-2 col-sm-2 col-xs-2">
								<div class="btnarea" >
									<button type="button" class="btn btn-primary" style="margin-right:5px; width:40.2%" ng-click="controller.search()">搜索</button>
									<button type="button" class="btn btn-danger" style="width:40.2%" ng-click="controller.reset()">重置</button>
								</div>
							</div>
						</div>
					</div>
					<div id="tab2" class="form-group" style="display: none;">
					<div class="row">
					<div class="col-md-5 col-sm-5 col-xs-5" style="margin-left: -33px;margin-top: 5px;">
						<label class="radio-inline" style="width: 100%;">
						<span style="float:left;font-weight: bold;font-size: 11px;">主机名称：</span>
							     	<input class="form-control" style="width: 60%; float: left;margin-left: 3%;" ng-model="inputHostName"/>
						 		 </label>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-5" style="margin-top: 5px;">
						<label class="radio-inline" style="width: 100%;">
						 <span style="float:left;font-weight: bold;font-size: 11px;"> 主机IP：</span>
									<input class="form-control" style="width: 60%; float: left;margin-left: 3%; "ng-model="inputHostIp"/>
								</label>
					</div>
					</div>
					</div>
				</form>
				</div>
			</div>
			</div>
		</div>
		
		<div class="classifyTab">
			<div class='tabs'>
				<div class="tabItem active" ng-click="controller.showSection1()"><span>监控指标配置</span></div>
				<div class="tabItem offset" ng-click="controller.showSection2()"><span>主机视图配置</span></div>
			</div>
		</div>
		<!-------->
		<div class="demo tabDemo" id="collectionDemo" style="background: #ECF0F5;">
			<div class="row">
				<div class="tab" role="tabpanel">
					<!-- Tab panes -->
					<div class="tab-content" style="background: #ECF0F5;">
						<div role="tabpanel" class="tab-pane fade in active" id="Section1">

								<!---主机ztree----->
							<div class="mapBottom table-bordered" style="font-size: 13px; background: white;">
								<div class="bottom_wrap left" id="predictChartDiv"
								style="overflow: auto; height: 490px;">
									<div class="ztree" id="hostztree"></div>
								</div>
								 
								<div class="right" style="position:relative;">
									<div class="rightdiv top">
										<label class="radio-inline" style="width: 483px;padding-top: 12px; margin-left: -6px;padding-left:0;">
											<span style="float:left;font-weight: bold; margin-top: 4px;">数据采集频率：
												 <em style="color:red;">(* 此配置为全局配置 )</em>
											</span>
												<select id="ThreeSitesDefault" ng-model="selectselectedSiteThreeInitValueedSite" class="form-control" 
													style="width: 80%; margin-top: 8%;"
													ng-change="setValue(selectselectedSiteThreeInitValueedSite)">
													<option ng-repeat="x in ThreeSites" value="{{x.id}}">{{x.name}}</option>
												</select> 
						 		 		</label>
						 		 		<button class="btn btn-warning" type="button" style="margin-top:10%;"
												ng-click="controller.updataDataAcquisitionFrequency()">修改</button>
									</div>
						
						<div  class="rightdiv nav" style=" width: 625px;">
									<div >
										<label class="radio-inline" style="width: 483px;padding-top: 12px; margin-left: -6px;padding-left:0;">
											<span style="float:left;font-weight: bold; margin-top: 4px;">告警次数阈值：</span>
												<select id="selectedSiteFiveInitValue" style="width: 80%; margin-top: 8%;"
													class="form-control" ng-model="selectedSite">
													<option ng-repeat="x in moSites" value="{{x.id}}">{{x.name}}</option>
											</select>
						 		 		</label>
									</div>
									<div>
										<label class="radio-inline" style="width: 483px;padding-top: 12px; margin-left: -6px;padding-left:0;">
											<span style="float:left;font-weight: bold; margin-top: 4px;">超阈值告警频率：</span>
												<select id="selectedSiteSixInitValue" style="width: 80%;margin-top: 8%;"
												class="form-control" ng-model="selectedSites">
													<option ng-repeat="x in sixSites" value="{{x.id}}">{{x.name}}</option>
												</select>
						 		 		</label>

									</div>
									<div style="float:right; margin-top:3%;">
										<button class="btn btn-warning" type="button"
											ng-click="controller.updataTimesANDMinutes()">修改</button>
									</div>
									</div>
								</div>
							</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade01" id="Section2">
								<!-------->
								<div style="margin-top: -3px;margin-left: 1.4%;margin-bottom: 6px;">
									<button class="btn btn-default" style="margin-right:10px;"
													type="button" ng-click="controller.saveConfigurationTab2()">保存配置</button>
									<button class="btn btn-default" style="" type="button"
													ng-click="controller.resetConfigurationTab2()">重置配置</button>
								</div>
								<!-------->
							<div class="mapBottom table-bordered" style="background: white;margin-left: 15px;">
								<table class="table table-bordered" style="font-size: 13px;width: 98%;">
									<tr>
										<th style="width:2%;"><input type="checkbox" id="check_all_tab2" /></th>
										<th ng-hide="true">序号</th>
										<th>主机IP</th>
										<th>主机名</th>
										<th>视图刷新频率</th>
										<th ng-hide="true">视图刷新ID</th>
									</tr>

									<tr ng-repeat="data in controller.dataTab2List">
										<td><input type="checkbox" class="check_item_tab2" /></td>
										<td ng-hide="true">{{data.id}}</td>
										<td>{{data.hostIp}}</td>
										<td>{{data.hostName}}</td>
										<td>
										<!--视图刷新频率 -->
										<select id="viewRefreshSiteId" class="form-control" ng-model="viewRefreshSite" ng-options="x.name as x.name for x in FourSites">
												<option selected value="">{{data.refreshTime}}</option>
										</select>
										</td>
										<td ng-hide="true">{{data.sytemParameterId}}</td>
									</tr>
							</table>
							
							<div class="spagination"
								style="padding-bottom: 63px; position: relative; margin-left: 25%; margin-top: -3%;">
								<div style="position: absolute; margin-left: -10%; margin-top: 3%;">总{{controller.paginationInfo.totalElements2}}条记录</div>
								<div style="position: absolute; left: 0px;">
									<ul uib-pagination
										total-items="controller.paginationInfo.totalPages2"
										ng-model="controller.queryCondition.page"
										max-size="controller.paginationInfo.maxSize" class="pagination-md"
										boundary-links="true" items-per-page="1" rotate="false"
										ng-change="controller.pageChanged2();" previous-text="上一页"
										next-text="下一页" first-text="首页" last-text="最后一页"></ul>
									<div class="col-md-1"
										style="top: 27px; left: 98%; width: 117px; position: absolute;">
										跳转
										<div class="col-md-1"
											style="left: 29%; float: left; top: 21px; position: absolute;">
											<input ng-model="controller.queryCondition.forwordPage"
												ng-keyup="enterEvent($event)" type="text" class="form-control"
												style="height: 33px; width: 50px; top: -28px; position: absolute;">
										</div>
										<div style="position: absolute; top: 0px; left: 94%;">页</div>
									</div>
								</div>
							</div>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).on('click', '.tabItem', function() {
		var index = $(this).index();
		$(this).addClass('active');
		$(this).removeClass('offset');
		$(this).siblings().removeClass('active');
		$(this).siblings().addClass('offset');
		$(this).addClass('zIndex').siblings().removeClass('zIndex')
	})
</script>
